<template>
  <div>
    <Breadcrumb :style="{margin: '24px 0'}">
        <BreadcrumbItem>首页</BreadcrumbItem>
        <BreadcrumbItem>管理员管理</BreadcrumbItem>
        <BreadcrumbItem>分配权限</BreadcrumbItem>
    </Breadcrumb>
    <Content :style="{padding: '24px', minHeight: '580px', background: '#fff'}">
      <div>
        <div><h2>分配权限</h2></div><br>
        <table class="vuetable" >
          <tr>
            <th style="width:15%" ></th>
            <th style="width:85%"></th>
          </tr>
          <tr v-for="(item,index) in categorylist" :key='index'  :id = "item.id" >
            <td v-html="item.title" ></td>
            <td >
                <CheckboxGroup v-model="authlist">
                  <span v-for="(checkval,checkvalone) in item.auth_child" :key="checkvalone">
                    <Checkbox :label="checkval.id">
                        <span >{{checkval.title}}</span>
                    </Checkbox>
                  <!-- <div v-html="key.title" style="float:left;margin-left:50px;"></div> -->
                  </span>
                </CheckboxGroup>
            </td>
          </tr>
        </table><br><br>
        <div style="align:center">
          <Button type="success" @click="editCategory()">提交</Button>
          <Button ><router-link to='/adminrole'><div style="color:balck">返回</div></router-link></Button>
        </div>

      </div>
    </Content>
  </div>
</template>
<style scoped>
.info {
  border-radius: 10px;
  line-height: 20px;
  padding: 10px;
  margin: 10px;
  background-color: #ffffff;
}
.catename {
  line-height: 30px;
}
.modeldiv {
  height: 300px;
}
.vuetable{
  line-height: 40px;
  width:100%;
}
</style>
<script>
import authDisbute from '@/assets/js/views/admin/authDisbute';

export default {
  ...authDisbute,
};
</script>

